<template>
    <p class="g-name">{{product.name}}</p>
    <p class="g-desc">{{product.desc}}</p>
    <p class="g-price">
        <span>{{product.price}}</span>
        <span>{{product.oldPrice}}</span>
    </p>
    <div class="g-service">
        <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
        </dl>
        <dl>
            <dt>配送</dt>
            <dd>至 </dd>
        </dl>
        <dl>
            <dt>服务</dt>
            <dd>
                <span>无忧退货</span>
                <span>快速退款</span>
                <span>免费包邮</span>
                <a href="javascript:;">了解详情</a>
            </dd>
        </dl>
    </div>
</template>
  
<script setup>
import { computed } from 'vue';

    const props = defineProps({
        product: {
            type: Object,
            // default: () => {}
        }
    })

    const product = computed(()=> {
        return props.product
    })
</script>
  
  <style lang="scss" scoped>
  .g-name {
      font-size: 22px
  }
  
  .g-desc {
      color: #999;
      margin-top: 10px;
  }
  
  .g-price {
      margin-top: 10px;
  
      span {
          &::before {
              content: "¥";
              font-size: 14px;
          }
  
          &:first-child {
              color: $priceColor;
              margin-right: 10px;
              font-size: 22px;
          }
  
          &:last-child {
              color: #999;
              text-decoration: line-through;
              font-size: 16px;
          }
      }
  }
  
  .g-service {
      background: #f5f5f5;
      width: 500px;
      padding: 20px 10px 0 10px;
      margin-top: 10px;
  
      dl {
          padding-bottom: 20px;
          display: flex;
          align-items: center;
  
          dt {
              width: 50px;
              color: #999;
          }
  
          dd {
              color: #666;
  
              &:last-child {
                  span {
                      margin-right: 10px;
  
                      &::before {
                          content: "•";
                          color: $mainColor;
                          margin-right: 2px;
                      }
                  }
  
                  a {
                      color: $mainColor;
                  }
              }
          }
      }
  }
  </style>